﻿<!doctype html>
<html lang="en" data-color-scheme="dark">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Cesium Demo</title>
    <!-- This is very important and makes this file ACT as if it's next to the
     bucket.html file. Routes should be relative to there -->
    <base href="./templates/" />
    <script>
      window.CESIUM_BASE_URL = "__CESIUM_BASE_URL__";
    </script>
    <link
      rel="stylesheet"
      href="__CESIUM_BASE_URL__/Widgets/widgets.css"
      vite-ignore
    />
    <link
      rel="stylesheet"
      href="__CESIUM_BASE_URL__/Widgets/lighter.css"
      vite-ignore
    />
    <style>
      /*
      * Minimal styles copied from the bucket.css stylesheet to avoid FOUC and reflow
      */
      html {
        height: 100%;
      }

      body {
        font-family: sans-serif;
        font-size: 9pt;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

        /* Matches --stratakit-color-text-neutral-primary */
        color: oklch(99.06% 0.002 247.84);

        /* Matches --stratakit-color-border-neutral-muted */
        --ring-color: oklch(32.63% 0.014 268.32);
        /* Matches --stratakit-color-bg-page-depth */
        --bg-dark: oklch(22.52% 0.005 268.32);
        /* Matches --stratakit-color-bg-path-base */
        --bg-lighter: oklch(24.37% 0.006 268.32);

        --_rings: repeating-radial-gradient(
          circle at center,
          var(--ring-color) 1px,
          var(--ring-color) 3px,
          transparent 3px,
          transparent 25px
        );
        --_gradient: linear-gradient(
          180deg,
          var(--bg-lighter) 0%,
          var(--bg-dark) 100%
        );

        background-image: var(--_rings), var(--_gradient);
      }

      #loadingOverlay {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.9;
        width: 100%;
        height: 100%;
        display: none;
      }

      #loadingOverlay h1 {
        text-align: center;
        position: relative;
        top: 50%;
        margin-top: -0.5em;
        font-size: 2em;
        font-weight: bold;
      }

      .sandcastle-loading #loadingOverlay {
        display: block;
      }

      .sandcastle-loading #toolbar {
        display: none;
      }
    </style>
    <script type="module">
      import { unstable_loadStyles } from "@stratakit/foundations";

      unstable_loadStyles(document);
    </script>
    <link
      rel="stylesheet"
      href="../styles/stratakit-mimic/styles.css"
      vite-ignore
    />
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <script type="module">
      import {
        embedInSandcastleTemplate,
        decodeBase64Data,
      } from "/src/Helpers.ts";

      let base64String;
      let data;

      // Since we are setting the HTML base href below, we need to get the getCesiumBaseUrl
      // upfront so that the value is correct. It gets cached for future calls.
      // This is only a problem when using combined Cesium, which is the only time Cesium
      // will be defined below.
      // TODO: I don't think this is needed anymore after switching to ESM modules but
      // I need to verify that
      // if (typeof window.Cesium !== "undefined") {
      //   window.Cesium.buildModuleUrl.getCesiumBaseUrl();
      // }

      if (window.location.hash.indexOf("#c=") === 0) {
        base64String = window.location.hash.substr(3);
        data = decodeBase64Data(base64String);
        //Handle case where demo is in a sub-directory by modifying
        //the HTML to add a base href.
        document.head.innerHTML = `${document.head.innerHTML}<base href="${data.baseHref}" />`;
        window.sandcastleData = data;
      }

      let code;
      if (window.sandcastleData) {
        base64String = window.location.hash.substr(3);
        data = window.sandcastleData;
        let html = data.html;
        code = data.code;
        const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
        if (isIE11) {
          html = html.replace("../templates", "templates");
        }

        // Add the HTML content
        const htmlElement = document.createElement("div");
        htmlElement.innerHTML = html;
        document.body.appendChild(htmlElement);

        // Add the JavaScript
        const scriptElement = document.createElement("script");
        scriptElement.type = "module";
        const isFirefox = navigator.userAgent.indexOf("Firefox/") >= 0;
        document.head.appendChild(scriptElement);
        scriptElement.innerHTML = embedInSandcastleTemplate(code, isFirefox);
      }
    </script>
    <script
      type="text/javascript"
      src="../Sandcastle-client.js"
      vite-ignore
    ></script>
  </body>
</html>
